﻿<style type="text/css">
    /*实名认证*/
    .realname-top{margin-top: 15px;overflow: hidden;text-align: center;}
    .top-left{margin-right: 15px;display: inline-block;max-width: 45%;}
    .top-right{display: inline-block;max-width: 45%; }
    .top-left img,.top-right img{width: 100%;display: inline-block;}
    .top-left,.top-right{position: relative;}
    .top-left input,.top-right input{position: absolute; top: 0; display: block; width: 100%; left: 0; height: 100%;opacity: 0}
    .mv-lgchild .mv-btn{height: 40px;text-align: center;color: #fff;line-height: 40px;margin-top: 35px; border-radius: 5px;}
    .realname-top p{padding-top: 10px;color: #488fcd}
    .mv-realname h2{background: #f2f2f2;margin-left: -15px;margin-right: -15px;font-size: 15px;padding: 10px 15px;text-align: center;margin-top: 20px;}
</style>
<div class="mv-lgchild validate-area" style="margin-top:10px;">
    <div class="mv-edit">
        <div class="cont-top">
            <span>真实姓名</span>
            <input id="idname" type="text" class="validate-elem" validate="true" validate-message="请输入姓名" placeholder="请输入姓名">
        </div>
        <div class="cont-top">
            <span>身份证号</span>
            <input id="idcard" type="text" class="validate-elem" validate="true" validate-message="请输入身份证号" placeholder="请输入身份证号">
        </div>
    </div>
    <div class="mv-realname">
        <h2>上传身份证正反面</h2>
        <div class="realname-top">
            <div class="top-left">
                <img id="idcardz_img" src="/Images/Default/realnamea.png">
                <p>身份证正面</p>
                <input id="idcardz" type="file" class="validate-elem" validate="true" validate-message="请上传身份证正面">
            </div>
            <div class="top-right">
                <img id="idcardf_img" src="/Images/Default/realnameb.png">
                <p>身份证反面</p>
                <input id="idcardf" type="file" class="validate-elem" validate="true" validate-message="请上传身份证反面">
            </div>
        </div>
    </div>
    <div class="mv-realname">
        <h2>上传手持身份证正面</h2>
        <div class="realname-top">
            <div class="top-left">
                <img id="idcards_img" src="/Images/Default/realnamed.jpg">
                <p>手持身份证</p>
                <input id="idcards" type="file" class="validate-elem" validate="true" validate-message="请上传手持身份证">
            </div>
        </div>
    </div>
    <div v-if="bag.basis.info.isreal == false">
        <a class="mv-btn" v-on:click="submit" v-if="bag.isreal == false">确认上传</a>
        <a class="mv-btn" v-if="bag.isreal">审核中</a>
    </div>
    <div v-if="bag.basis.info.isreal == false && bag.ispass == true" style="padding-bottom:30px;text-align:center;padding-top:10px;">
        <a style="color:#f11" >{{bag.remarks}}</a>
    </div>
    <div v-if="bag.basis.info.isreal == true">
        <a class="mv-btn">已实名认证</a>
    </div>
</div>
<div style="height:60px;"></div>
<script type="text/javascript">
    var pagedata = {
        request: {
            method: "VIEW_USER_REAL"
        },
        screen: {
            header_title_name: "实名认证",
            header_display: true,
            footer_display: true,
            footer_choose: "user",
            header_exit_click: function () {
                mview.view.load('/views/User/main.html')
            }
        },
        oncreate: function () {
            m.view.node("#idcardz").on("change", function () {
                mview.custom.preview_image(document.getElementById("idcardz"), 300, function (base64) {
                    document.getElementById("idcardz_img").src = base64;
                });
            });
            m.view.node("#idcardf").on("change", function () {
                mview.custom.preview_image(document.getElementById("idcardf"), 300, function (base64) {
                    document.getElementById("idcardf_img").src = base64;
                });
            });
            m.view.node("#idcards").on("change", function () {
                mview.custom.preview_image(document.getElementById("idcards"), 300, function (base64) {
                    document.getElementById("idcards_img").src = base64;
                });
            });
        },
        data: {

        },
        methods: {
            login: function () {
                mview.view.load("views/user/login.html");
            },
            register: function () {
                mview.view.load("views/user/register.html");
            },
            back: function () {
                mview.view.load("views/user/main.html");
            },
            send_sms: function (event) {
                var elm = event.target;
                mview.custom.sms_only_send(elm);
            },
            submit: function () {
                //调用验证表单程序
                mview.view.form.validate("validate-area", function (data) {
                    //压缩图片
                    mview.custom.preview_image(document.getElementById("idcardz"), 640, function (idcardz_base64) {
                        mview.custom.preview_image(document.getElementById("idcardf"), 640, function (idcardf_base64) {
                            mview.custom.preview_image(document.getElementById("idcards"), 640, function (idcards_base64) {
                                mview.socket.send({
                                    data: {
                                        method: "REAL_ADD",
                                        idname: data.idname,
                                        idcardz: idcardz_base64,
                                        idcardf: idcardf_base64,
                                        idcards: idcards_base64,
                                        idcard: data.idcard
                                    },
                                    success: function (data) {
                                        if (data.Code == 0) {
                                            mview.control.tips("申请成功");
                                            pagedata.reload();
                                        }
                                        else {
                                            mview.control.tips(data.Message);
                                        }
                                    }
                                });
                            });
                        });
                    });
                });
            }
        }
    }
    mview.view.chlid.init(pagedata);
</script>